<template>
  <div id="uesrtext">
    <div>
      <el-popover placement="top-start" width="400" trigger="click" class="emoBox">
        <div class="emotionList">
          <a href="javascript:void(0);" @click="getEmo(index)" v-for="(item,index) in faceList" :key="index" class="emotionItem">{{item}}</a>
        </div>
        <!--        emoji表情包-->
        <el-button id="emojiBtn" class="emotionSelect" slot="reference">
          <i class="fa fa-smile-o" aria-hidden="true"></i>
        </el-button>
      </el-popover>
      <el-upload
              class="upload-btn"
              action="/file"

              :on-success="imgSuccess"
              :on-error="imgError"
              :show-file-list="false"
              accept=""
      >
        <el-button id="uploadImgBtn" icon="el-icon-picture-outline"></el-button>
      </el-upload>
      <!--      截图功能-->
      <el-button  id="scStBtn" @click="screenShot" icon="el-icon-scissors"></el-button>

      <!--     文件-->
      <el-upload
              class="upload-btn"
              action="/file"

              :on-success="fileSuccess"
              :on-error="imgError"
              :show-file-list="false"
              accept=""
      >
        <el-button id="uploadImgBtn" icon="el-icon-folder-opened"></el-button>
      </el-upload>

    </div>
    <textarea id="textarea" placeholder="回车键发送" v-model="content" @keydown.enter="addMessageByClick">
    </textarea>
    <el-button id="sendBtn" type="primary" size="mini" @click="addMessageByClick" >发送(S)</el-button>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  const appData=require("../../utils/emoji.json")//引入存放emoji表情的json文件

  export default {
    name: 'uesrtext',
    data () {
      //它应该返回一个对象
      return {
        faceList:[],//表情包数据
        content:'',
        ListName:'',
        screenShotList:[]//截图
        ,
        fileSuccessList:[]

      }
    },
    mounted(){
      for (let i in appData){//读取json文件保存数据给数组
        this.faceList.push(appData[i].char);
      }
    },
    computed:mapState([
      'sessions',
      'currentSession',
    ]),
    methods: {
      // //截图
      screenShot() {
        // let myObject=new Object();
        // myObject.msg=this.screenShotList
        this.getRequest("/screenShot").then(resp=>{
          if (resp){
            //从后端传过来的数据赋值给this指向的实例
            this.screenShotList=resp;
            alert("恭喜"+this.screenShotList[0].msg+"!"+'\n');
            //刷新页面
            location.reload();

          }
        })

      },
      addMessageByClick(){
        let msgObj=new Object();
        msgObj.content=this.content;
        msgObj.messageTypeId=1;
        //发送群聊消息
        if (this.currentSession.username=="群聊"){
          console.log(this.content);
          this.$store.state.stomp.send("/ws/groupChat",{},JSON.stringify(msgObj));
        }
        //给机器人发送消息
        if (this.currentSession.username=="机器人"){
          msgObj.fromNickname=this.$store.state.currentUser.nickname;
          msgObj.to='机器人';
          this.$store.state.stomp.send("/ws/robotChat",{},JSON.stringify(msgObj));
          //保存该条记录到session
          this.$store.commit('addMessage',msgObj);
        }
        //发送私聊消息
        else{
          msgObj.from=this.$store.state.currentUser.username;//从$store取当前对方姓名
          msgObj.fromNickname=this.$store.state.currentUser.nickname;
          msgObj.to=this.currentSession.username;//自己的姓名
          this.$store.state.stomp.send("/ws/chat",{},JSON.stringify(msgObj));

          //*JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串
          //STOMP是一个简单的面向文本的消息传递协议
          //提交私聊消息记录
          this.$store.commit('addMessage',msgObj);
        }
        //清空输入框
        this.content='';
      },

      fileSuccess (response, file, fileList) {
        console.log("-----------------------------文件url为："+response);
        let msgObj=new Object();
        // msgObj.ListName=this.ListName;
        this.fileSuccessList=response;
        msgObj.content=this.fileSuccessList[0].url;
        msgObj.ListName=this.fileSuccessList[0].filename;

        //设置消息类型为图片
        msgObj.messageTypeId=3;

        if (this.currentSession.username=="群聊"){
          this.$store.state.stomp.send("/ws/groupChat",{},JSON.stringify(msgObj));
        }else {
          msgObj.from=this.$store.state.currentUser.username;
          msgObj.fromNickname=this.$store.state.currentUser.nickname;
          msgObj.to=this.currentSession.username;

          this.$store.state.stomp.send("/ws/chat",{},JSON.stringify(msgObj));
          //提交私聊消息记录
          this.$store.commit('addMessage',msgObj);
        }
        // location.reload();
      },
      /**
       *       图片上传的方法
       */
      // 上传前
      // beforeAvatarUpload(file) {
      //   不给机器人发送图片
      //   if (this.currentSession.username=="机器人") {
      //     this.$message.error("瓦力拒绝接收你的图片！")
      //   }
      //   判断图片大小
      //   let isLt1M = file.size / 1024  / 1024 <1000;
      //   console.log(file)
      //   if (!isLt1M) {
      //     this.$message.error('上传图片大小不能超过 1000mb!');
      //   }
      //   判断图片的格式
      //   let imgType=file.name.substring(file.name.lastIndexOf(".")+1);
      //   imgType=imgType.toLowerCase();
      //   let isImg=imgType==='jpg'|| imgType==='png'|| imgType==='jpeg'||imgType==='gif';
      //    if (!isImg){
      //      this.$message.error('上传图片格式不符合要求！');
      //    }
      //   return true;
      // },
      // 图片上传成功
      imgSuccess(response, file, fileList) {
        console.log("图片url为："+response);
        let msgObj=new Object();
        this.fileSuccessList=response;
        msgObj.content=this.fileSuccessList[0].url;
        //设置消息类型为图片
        msgObj.messageTypeId=2;

        if (this.currentSession.username=="群聊"){
          this.$store.state.stomp.send("/ws/groupChat",{},JSON.stringify(msgObj));
        }else {
          msgObj.from=this.$store.state.currentUser.username;
          msgObj.fromNickname=this.$store.state.currentUser.nickname;
          msgObj.to=this.currentSession.username;
          this.$store.state.stomp.send("/ws/chat",{},JSON.stringify(msgObj));
          //提交私聊消息记录
          this.$store.commit('addMessage',msgObj);
        }
        location.reload();
      },
      // 图片上传失败
      imgError(err, file, fileList){
        this.$message.error("上传失败");
      },
      //获取Emoji
      getEmo(index){
        var textArea=document.getElementById('textarea');
        //将选中的表情插入到输入文本的光标之后
        function changeSelectedText(obj, str) {
          if (window.getSelection) {
            // 非IE浏览器
            textArea.setRangeText(str);
            // 在未选中文本的情况下，重新设置光标位置
            textArea.selectionStart += str.length;
            textArea.focus()
          } else if (document.selection) {
            // IE浏览器
            obj.focus();
            var sel = document.selection.createRange();
            sel.text = str;
          }
        }
        changeSelectedText(textArea,this.faceList[index]);
        this.content=textArea.value;// 要同步data中的数据
        // console.log(this.faceList[index]);
        return;

      },
    }
  }
</script>


<style lang="scss">
  /* el-popover是和app同级的，所以scoped的局部属性设置无效 */
  /* 需要设置全局style */
  .el-popover{
    height:200px;
    width:450px;
    overflow: scroll;
    overflow-x:auto;
  }
</style>

<style lang="scss" scoped>
  #uesrtext {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 30%;
    border: solid 1px #DDD;
    background-color: white;
    > textarea {
      padding: 10px;
      width: 95%;
      height: 58%;
      border: none;
      outline: none;
      resize: none;//禁止拉伸
    }
    #sendBtn{
      float: right;
      margin-right: 10px;
    }
    #uploadImgBtn{
      border: none;
      margin-bottom: 0px;
      padding: 0px 0px 0px 12px;
    }
    #uploadImgBtn:hover{
      background-color: white;
    }

    //截图
    #scStBtn{
      border: none;
      padding: 0px 0px 0px 12px;
      margin-bottom: 0px;
    }
    #scStBtn:hover{
      background-color: white;
    }

    #emojiBtn{
      border: none;
      padding-right: 0px;
      padding-bottom: 0px;
      margin-bottom: 0px;
    }
    #emojiBtn:hover{
      background-color: white;
    }
    .upload-btn{
      display: inline-block;
    }
  }
  .emotionList{
    display: flex;
    flex-wrap: wrap;
    padding:5px;
  }
  .emotionItem{
    width:10%;
    font-size:20px;
    text-align:center;
  }
  /*包含以下四种的链接*/
  .emotionItem {
    text-decoration: none;
  }
  /*正常的未被访问过的链接*/
  .emotionItem:link {
    text-decoration: none;
  }
  /*已经访问过的链接*/
  .emotionItem:visited {
    text-decoration: none;
  }
  /*鼠标划过(停留)的链接*/
  .emotionItem:hover {
    text-decoration: none;
  }
  /* 正在点击的链接*/
  .emotionItem:active {
    text-decoration: none;
  }
</style>
